<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    body{
        margin: 0;
    }
    header {
        height: 700px;
        background-image: url(bg.jpg);
        background-size:cover;
        display: flex;
        align-items:center;
        justify-content:center;
        }
        button{
            position:relative;
            top:100px;
            width: 200px;
            height:60px;
            background-color:transparent;
            color:#fff;
            font-size:24px;
            border:1px solid #fff;
            outline:none;
            border-radius: 10px;
            cursor:pointer;
        }
        div{
        height:300px;
        display: flex;
        align-items:center;
        justify-content:center;
        }
        span{
            font-size:64px;
            color:#e96d4f;
        }
        article{
            height: 600px;
            background-image:url(2.jpg);
            background-attachment:fixed;
        }
        main{
            height:580px;
            position:relative;
        }
        main>img{
            position:absolute;
            bottom:0;
            left: 180px;
}
main>aside {
    width:500px;
    position:absolute;
    top:100px;
    right: 200px;
    text-align: right;
}
aside>h1{
    font-size:50px;
    color:pink;
}
aside>p{
font-size:20px;
color:red;
}
aside>p>a{
text-decoration: none;
color:red;
}
map{
display:block;
width:100%;
height:600px;
}
</style>
</head>
<body>
    <header>
        <button >大佬</button>
    </header>
    <div>
        <span> 乐.在.沟.通</span>
</div>
 <article></article>
<main>
    <img src="27.png" >
    <aside>
<h1>沟通是跨越千山万水亲切的声音</h1>
<p>无论何时何地与好友想聊多久聊多久</p>
<p><a href=http://im.qq.com/">了解更多 <</a></p>
    </aside>
</main>
<map id="here"></map>
</body>
<script src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script>
function initMap() {
    var map = new BMap.Map("here");
    var point = new BMap.Point(108.946023, 34.331407);
    map.centerAndZoom(point, 19);
    window.map = map;
}
initMap();
</script>
</html>